<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>豆豆笔记</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/static/css/main.css"/>
<!--    <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/default.min.css">-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai.min.css">
<!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">-->

    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>

    <!-- and it's easy to individually load additional languages -->
    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/nginx.min.js"></script>
    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/javascript.min.js"></script>

    <style>
        .ws-main {
            border: 0;
        }
    </style>
</head>
<body>
<div class="layui-header ws-header ws-bg-light">
    <div class="layui-container">
        <div class="ws-logo">
            <a class="logo" href="/" style="display: inline;align-items: center;font-size: 30px;">
                <img src="/img/logo.png" alt="豆豆笔记" style="color: #16BAAA;font-size: 30px;width: auto;height: 30px;line-height:60px;margin-right: 10px;">
                <text style="margin-left: 0;">豆豆笔记</text>
            </a>
        </div>
        <div class="ws-header-menu">
            <ul class="layui-nav layui-bg-gray ws-bg-light">
                <li class="layui-nav-item layui-this"><a href="/">首页</a></li>
                <li class="layui-nav-item"><a href="/link/">归档</a></li>
                <li class="layui-nav-item"><a href="/about/">关于</a></li>
                <li class="layui-nav-item"><a href="/tool/">工具</a></li>
                <li class="layui-nav-item"><a href="/sponsor/">赞助</a></li>
            </ul>
            <div class="ws-header-tool ws-bg-light" style="display: inline-block">
                <div class="layui-form" lay-filter="form">
                    <input type="checkbox" name="themeMode" lay-filter="header-theme-mode" lay-skin="switch">
                    <div lay-checkbox>
                        <i class="layui-icon layui-icon-moon"></i> |
                        <i class="layui-icon layui-icon-light"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="ws-header-menu-btn">
            <a class="ws-menu-phone" href="javascript:;" style="display: block;">
                <i class="ws-header-menu-icon layui-icon layui-icon-shrink-right"></i>
            </a>
        </div>
    </div>
</div>
<div class="ws-menu-phone-list">
    <div style="background-color: inherit;">
        <div style="height: 60px; text-align: right;display: flex;justify-content: space-between">
            <div class="ws-theme-icon-btn" style="border-radius: 7px; display: inline;margin-left: 40px;height: 40px;width: 40px;line-height: 40px;background-color: #d2d2d2;margin-top: 10px;text-align: center;">
                <i class="ws-theme-icon layui-icon layui-icon-moon" style="color: #333333;"></i>
            </div>
            <i class="ws-menu-phone-close layui-icon layui-icon-error" style="color: #333333;line-height: 60px;font-size: 23px"></i>
        </div>
        <ul >
            <li style="border-top: 1px solid #888888;padding: 20px 40px;"><a href="/">首页</a></li>
            <li style="border-top: 1px solid #888888;padding: 20px 40px;"><a href="/link/">归档</a></li>
            <li style="border-top: 1px solid #888888;padding: 20px 40px;"><a href="/about/">关于</a></li>
            <li style="border-top: 1px solid #888888;padding: 20px 40px;"><a href="/tool/">工具</a></li>
            <li style="border-top: 1px solid #888888;padding: 20px 40px;"><a href="/sponsor/">赞助我们</a></li>
        </ul>
    </div>
</div>
<div class="layui-main ws-main ws-bg-light ">
    <div class="layui-padding-3 ws-detail">
        <div class="ws-detail-hd">
            <div class="ws-article-head">
                <h2>apiDoc</h2>
            </div>
            <div class="ws-foot">
                <span><i class="layui-icon layui-icon-time"></i>2024-12-26</span>
                <span><i class="layui-icon layui-icon-eye"></i>89</span>
                <span><i class="layui-icon layui-icon-list"></i>Notepad</span>
            </div>
        </div>

        <div class="ws-detail-bd layui-text">
            <h3></h3>
            <blockquote class="layui-elem-quote">
                <strong>apiDoc</strong>是一个自动生成 API 文档的工具，广泛用于 RESTful API 的文档化。
                通过简单的注释语法，你可以为你的 API 编写详细的文档，并生成漂亮、易于使用的 HTML 页面，供前端开发者、测试人员或其他团队成员使用。
                <strong>apiDoc</strong>支持多种编程语言，尤其适用于 Node.js、Express 等框架中的 REST API 文档生成。
            </blockquote>


            <h3>前言</h3>
            <p>本文档中的所有示例都使用Javadoc风格（可以在C#，Go，Dart，Java，JavaScript，PHP，TypeScript和所有其他Javadoc支持语言中使用）</p>
            <h3>官方网站</h3>
            <p>apiDoc 官方文档：<a href="//apidocjs.com" target="_blank">https://apidocjs.com/</a></p>
            <h3>安装</h3>
            <pre lay-options="{lang:'bash'}">npm install apidoc -g</pre>
            <ul><li>如果还没有安装 Node.js，你需要先安装 Node.js 和 npm。</li></ul>
            <h3>编写注释</h3>
            <span>在你的 API 代码中，使用 <strong>apidoc</strong> 的注释格式标注 API 文档。这些注释通常放置在路由或控制器函数上方。</span><br/>
            <span>例如：</span>
            <pre lay-options="{lang:'php'}">
/**
 * @api {get} /users 请求用户列表
 * @apiName GetUsers
 * @apiGroup User
 *
 * @apiSuccess {String} id 用户唯一标识
 * @apiSuccess {String} name 用户名称
 * @apiSuccess {String} email 用户邮箱
 *
 * @apiError UserNotFound 找不到用户
 */
public function users() {
    // 业务逻辑
}
            </pre>
            <span>更多 apiDoc 参数请访问 <a href="//apidocjs.com" target="_blank">官方文档</a></span>
            <h3>生成文档</h3>
            <pre lay-options="{lang:'bash'}">apidoc -i ./src/ -o ./public/</pre>
            <ul>
                <li><code>-i</code>指定源代码路径（包含注释的文件夹）。</li>
                <li><code>-o</code>指定输出路径（生成的 HTML 文档保存的文件夹）。</li>
            </ul>
            <h3>示例结构</h3>
            <span>假设你有以下的项目结构：</span>
            <pre>
project/
├── src/
│   └── routes/
│       └── user.js
├── public/
│   └── index.html
└── apidoc.json
            </pre>
            <ol>
                <li>在 <strong>src/routes/user.js</strong> 中添加 <strong>apidoc</strong> 注释，描述 API 的接口和参数。</li>
                <li>运行 <strong>apidoc</strong> 生成文档。</li>
                <li>打开 <strong>public/index.html</strong> 查看生成的 API 文档。</li>
            </ol>
            <h3>配置文件 (apidoc.json)</h3>
            <p><strong>apidoc</strong> 还允许你配置项目的基本信息（如项目名、版本等）。这些信息通常保存在 <strong>apidoc.json</strong> 文件中。例如：</p>
            <pre lay-options="{lang:'JSON'}">
{
    "name": "My API",
    "version": "1.0.0",
    "description": "这是我的第一个 API 项目",
    "title": "我的API文档"
}
</pre>
            <h3>自定义模板</h3>
            <blockquote class="layui-elem-quote">
                <div>你可以自己自定义模板，根据你的喜好进行更改。</div>
                <div>如果你不想用默认模板，又懒得自己编写，这里有一个根据官方模板进行小改动的版本。</div>
                <div>模板下载地址：<a href="/static/file/template.zip">点击下载</a></div>
            </blockquote>
            <ol>
                <li>将下载的模板文件解压到指定目录，我这里的目录是<code>./public/apidoc/template/</code></li>
                <li>
                    执行以下命令：
                    <pre lay-options="{lang:'bash'}">apidoc -i ./src/ -o ./public/doc/ -t ./public/apidoc/template/</pre>
                    <ul>
                        <li><code>-i</code>从 <code>./src/</code>目录中的源代码文件（包含 API 注释）中提取 API 文档。</li>
                        <li><code>-o</code>将生成的文档输出到 <code>./public/doc/</code>目录。</li>
                        <li><code>-t</code>使用位于<code>./public/apidoc/template/</code>目录的自定义模板生成文档。</li>
                    </ul>
                </li>
                <li>打开 <code>public/doc/index.html</code> 查看生成的 API 文档。</li>
            </ol>
            <h3>总结</h3>
            <p>恭喜你已经学会了 <strong>apiDoc</strong> 的基本使用方法，接下来赶紧到你的项目中去尝试一下吧！！！</p>

        </div>
    </div>

</div>

<script type="text/html" id="qrModal">
    <div class="layui-row" style="display: flex; padding:15px;">
        <div class="layui-col-md6" style="flex: 0 0 50%;text-align: center;">
            <img src="/img/wxpay.jpg" class="ws-sponsor-img"/>
        </div>
        <div class="layui-col-md6" style="flex: 0 0 50%;text-align: center;">
            <img src="/img/alipay.jpg" class="ws-sponsor-img"/>
        </div>
    </div>
</script>
<div class="layui-footer ws-footer ws-bg-light">
    <div class="ws-text">
        <div class="ws-footer-menu">
            <div class="ws-footer-menu-type">
                <dl style="flex: 0 0 50%;max-width: 33.33%;width: 100%;">
                    <dt class="ws-bg-light">相关连接</dt>
                    <dd><a class="no-referrer" href="javascript:;" data-title="请作者喝咖啡" data-target="#qrModal">捐赠</a></dd>
                </dl>
                <dl style="flex: 0 0 50%;max-width: 33.33%;width: 100%;">
                    <dt class="ws-bg-light">联系我们</dt>
                    <dd>htct1314@foxmail.com</dd>
                </dl>

            </div>
            <div class="ws-footer-qr-code-list">
                <div class="ws-footer-qr-code">
                    <div style="border: 1px solid #d1d1d1">
                        <img src="/img/applet.jpg" style="width:100%;max-width: 100%;" alt=""/>
                    </div>
                    <div style="text-align: center">小程序</div>
                </div>
                <div class="ws-footer-qr-code">
                    <div style="border: 1px solid #d1d1d1">
                        <img src="/img/we_chat.png" style="width:100%;max-width: 120px" alt=""/>
                    </div>
                    <div style="text-align: center">微信</div>
                </div>
                <div class="ws-footer-qr-code">
                    <div style="border: 1px solid #d1d1d1">
                        <img src="/img/sina.png" style="width:100%;max-width: 120px" alt=""/>
                    </div>
                    <div style="text-align: center">新浪微博</div>
                </div>

            </div>
        </div>
        <hr/>
        <p>友情链接：
            <a href="//www.aliyun.com" target="_blank">阿里云</a>
            <a href="https://www.huaweicloud.com/" target="_blank">华为云</a>
            <a href="//cloud.tencent.com" target="_blank">腾讯云</a>
            <a href="//www.ctyun.cn/" target="_blank">天翼云</a>
            <a href="//layui.dev" target="_blank">Layui</a>
            <a href="//cli.im/" target="_blank">草料网</a>
            <a href="//compresspng.com/zh/" target="_blank">在线压缩图片</a>
            <a href="//www.thinkphp.cn" target="_blank">ThinkPHP</a>
        </p>
        <div class="ws-footer-copyright">
            <div>Copyright © <span id="footer-year"></span> 豆豆笔记 All Rights Reserved.</div>
            <div>豆豆笔记&nbsp;版权所有</div>
            <div>
                <a href="https://beian.miit.gov.cn" target="_blank">
                    <img src="http://htct1314.cn/img/icon.png" style="height:16px;margin-right:5px;" alt/>
                    <span>闽ICP备2022002089号-1</span>
                </a>
            </div>
        </div>
    </div>
</div>
<ul class="layui-fixbar" style="display: none;">
    <li lay-type="top" style="display: list-item;">
        <a href="javascript:;" class="layui-icon layui-icon-top layui-fixbar-top" style="display: block;color:#fff;"></a>
    </li>
</ul>

<script src="/layui/layui.js"></script>
<script src="/static/js/main.js"></script>
</body>
</html>